<template>
  <hm-layout :customStyle="{ 'background': '#f7f7fa' }">
    <view class="detail-wrap">
      <inviteGuide :price="goodsDetail.diplayPrice"/>
      <view class="detail-left">
        <el-carousel arrow="always" class="img-swiper"  height="500px" :interval="2000">
          <el-carousel-item class="img-swiper-item" v-for="img in goodsDetail.rendering_url" :key="img">
            <image loop=infinite class="img-swiper-item" :src="img" mode="scaleToFill"></image>
          </el-carousel-item>
        </el-carousel>
      </view>
      <view class="detial-right">
        <view class="goods-name">{{ goodsDetail.goods_name }}</view>
        <view class="tags-list">
          <view class="tag-item" v-if="goodsDetail.is_original">原创</view>
          <view class="tag-item" v-if="goodsDetail.contain_keyword">含关键词</view>
          <view class="tag-item" v-if="goodsDetail.contain_underlay">含底图</view>
        </view>
        <view class="goods-row">
          <view class="row-label">关键词：</view>
          <view class="row-content">购买可查看</view>
        </view>
        <view class="goods-row">
          <view class="row-label">下载地址：</view>
          <view class="row-content">购买可查看</view>
        </view>
        <view class="goods-row">
          <view class="row-label">数量：</view>
          <view class="row-content">{{ goodsDetail.surname_nums}}张</view>
        </view>
        <view class="tips">
          <el-alert class="info-item" :closable="false" v-for="(msg, index) in tipInfo" :title="`${index + 1}. ${msg}`" type="info" />
        </view>
        <hm-pay :goodsInfo="goodsDetail" @paysuccess="paysuccess">
          <view class="buy-btn ui-BG-Main-Gradient">购买(¥{{ goodsDetail.diplayPrice }})</view>
        </hm-pay>
      </view>
    </view>
  </hm-layout>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import inviteGuide from './invite-guide.vue'
  let goodsDetail = ref({})
	let vk = uni.vk

  const tipInfo = [
  	'虚拟商品一经售出概不退货，不含教程',
    '关键词仅仅做学习参考，使用不一定能出同样效果的图',
    '图片是自己做的，可能和别人有一些不一样，介意不要购买',
  	`使用平台艺术字直播工具省时省力(免费)`,
  	'分享给好友也能赚取佣金'
  ]
  
  let fetchGoodsDetail = (id) => {
    vk.callFunction({
    	url: 'client/goods/kh/goodsDetail',
    	title: '请求中...',
    	data: {
    		_id: id
    	},
    	success: (res) => {
    		goodsDetail.value = res.data
    	}
    });
  }
  const paysuccess = () => {
     ElMessageBox.confirm(
        '购买成功，是否立即查看下载链接',
        '温馨提示',
        {
          confirmButtonText: '去查看',
          cancelButtonText: '继续选购',
          type: 'success',
        }
      )
        .then(() => {
          vk.navigateTo(`/pages/my-goods/my-goods`);
        })
        .catch(() => {
          vk.navigateTo(`/pages/mall/mall`);
        })
  }
  onLoad(options => {
    if (options._id) {
      fetchGoodsDetail(options._id)
    }
  })
</script>
<style lang="scss" scoped>
.detail-wrap {
  width: 1310px;
  margin: 20px auto 0;
  padding: 20px;
  display: flex;
  background-color: #fff;
  position: relative;
  .detail-left {
    .img-swiper {
    	width: 500px;
    	height: 500px;
    }
    .img-swiper-item {
    	width: 500px;
    	height: 500px;
    }
  }
  .detial-right {
    margin-left: 60px;
    
    .goods-name {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .tags-list {
      display: flex;
      margin-bottom: 20px;
      .tag-item {
        margin-right: 6px;
        padding: 2px 4px;
        color: #ff5000;
        font-size: 12px;
        vertical-align: top;
        border: 1px solid #ff5000;
      }
    }
    
    .goods-row {
      margin-top: 10px;
      font-size: 16px;
      display: flex;
      
      .row-label {
        font-weight: bold;
        width: 85px;
      }
    }
    .tips {
      margin-top: 20px;
      .info-item {
        margin-bottom: 10px;
      }
    }
    .buy-btn {
      margin-top: 40px;
      height: 46px;
      line-height: 46px;
      border-radius: 23px;
      text-align: center;
    }
  }
}
</style>